<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>        
        <script type="text/javascript" src="ui/js/jquery/ui/jquery-ui-1.10.4.custom.js"></script>
        <link href="ui/css/jquery/ui/smoothness/jquery-ui-1.10.4.custom.css" rel="stylesheet" >
        <script src="ui/js/jquery/jquery.dataTables.js"></script>
        <script src="ui/js/iteraciones.js"></script>
        
    <script>
        $(document).ready(function(){
                
        tabla();
        
        
        });
        
        function tabla(){
            // Setup - add a text input to each footer cell
        $('#iteraciones-dt tfoot th').each( function () {
            var title = $('#iteraciones-dt thead th').eq( $(this).index() ).text();
            $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
        } );
  
        var table = $('#iteraciones-dt').DataTable( {
                        dom: 'T<"clear">lfrtip',
                        processing: true,
                        serverSide: true,
                        "bDestroy": true,
                        "order": [[ 0, "desc" ]],
                        ajax: {
                            url: "/xmlc2/ListaIteracionesServlet",
                            type: "POST"
                        },        
                        columns: [
                            { data: "id" },
                            { data: "codigo" },
                            { data: "descripcion" },
                            { data: "inicio" }, 
                            { data: "fin" } 
                        ]
                    } );

                        // Apply the filter
                    $("#iteraciones-dt tfoot input").on( 'keyup change', function () {
                        table
                            .column( $(this).parent().index()+':visible' )
                            .search( this.value )
                            .draw();
                    } );
        }
        
        
        
    </script>
        
        
    </head>
    <body>
        <div>     
           <legend style="font-size: 18px; color: #00356a; font-weight: bold">GESTI&Oacute;N DE ITERACIONES</legend>
            <button id="nuevo" class="large">Nuevo</button>       
            <div>&nbsp;</div> 
        
             <div class="example">
            <table class="table striped hovered dataTable" id="iteraciones-dt">
                <thead>
                <tr>
                    <th class="text-left">Id</th>
                    <th class="text-left">Codigo</th>
                    <th class="text-left">Descripci&oacute;n</th>
                    <th class="text-left">Fecha Inicio</th>   
                    <th class="text-left">Fecha Fin</th>   
                </tr>
                </thead>

                <tbody>
                    <tr>
                        <td colspan="4" class="dataTables_empty">Loading data from server</td>
                    </tr>
                </tbody>

                <tfoot>
                <tr>
                    <th class="text-left">Id</th>
                    <th class="text-left">Codigo</th>
                    <th class="text-left">Descripci&oacute;n</th>
                    <th class="text-left">Fecha Inicio</th>  
                    <th class="text-left">Fecha Fin</th>  
                </tr>
                </tfoot>
            </table>
            
        </div>

            
            
        </div>
        
        
            <div id="dlg_iteraciones" style="display: none" title="Proyectos">      
                <form id="form_iteraciones" onsubmit="return false">
                <label>C&oacute;digo</label>
                <div class="input-control text size2" data-role="input-control">
                    <input onkeyup="this.value = this.value.toUpperCase();" id="codigo" name="codigo" type="text" placeholder="C&oacute;digo" required>
                    <button class="btn-clear"></button>
                </div>
                <label>Descripci&oacute;n</label>
                <div class="input-control text size6" data-role="input-control">
                    <input onkeyup="this.value = this.value.toUpperCase();" id="descripcion" name="descripcion" type="text" placeholder="Desccripci&oacute;n" required > 
                    <button class="btn-clear"></button>
                </div>

                <label>Fecha Inicial</label>
                <div class="input-control text size2" id="fecini">
                    <input id="inicio" type="text" name="inicio"  placeholder="Fecha Inicio" required />
                    <button class="btn-clear"></button>
                </div>

                <label>Fecha Final</label>
                <div class="input-control text size2" data-role="input-control">
                    <input id="fin" name="fin" type="text" placeholder="Fecha Final" required>  
                    <button class="btn-clear"></button>
                </div>
                <br />
                
                <label>Responsable</label>
                <div class="input-control select size6" data-role="input-control">
                    <select id="responsable" name="responsable" placeholder="Responsable" required></select>
                </div>   
                
                <label>Proyecto</label>
                <div class="input-control select size6" data-role="input-control">
                    <select id="proyecto" name="proyecto" placeholder="Proyecto" required></select>
                </div>   
                
                
                <input type="submit" id="enviar" style="display: none" value="Guardar" />
                </form>
            </div>
            
            
                
            
        
        
        
        
    </body>
</html>
